<!-- 温州二中 衢州二中 沈文轩等人版权所有 -->

<!--suppress HtmlUnknownTarget, HtmlDeprecatedAttribute -->
<head>
    <meta charset="utf-8">
    <title>上课管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <!-- <link href="{{url_for('static',filename='css/tabler.min.css')}}" rel="stylesheet"> -->
    <link href="{{ url_for('static',filename='css/docs.css') }}" rel="stylesheet">

    <link href="{{ url_for('static',filename='css/bootstrap.min.css') }}" rel="stylesheet">


    <script src="{{ url_for('static',filename='js/chart.js') }}"></script>
    <script src="{{ url_for('static',filename='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/crypto-js.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/jquery-1.12.4.min.js') }}"></script>
    <link rel="icon" href="{{ url_for('static',filename='images/ico/favicon2.ico') }}">
    <script src="{{ url_for('static',filename='js/sweetalert2.all.min.js') }}"></script>
    <link href="{{ url_for('static',filename='css/sweetalert2.min.css') }}" rel="stylesheet">
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<style>
    .table td {
        white-space: nowrap;
    }

    .table th {
        white-space: nowrap;
    }
</style>
<style>
    .table td {
        white-space: nowrap;
    }

    .table th {
        white-space: nowrap;
    }
</style>

<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand">
            <img src="{{ url_for('static',filename='images/ico/favicon2.ico') }}" alt="" width="30" height="24">
            {{ Name }}欢迎浏览 上课控制与题目发布面板！
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/system">主页</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-bs-toggle="dropdown" aria-expanded="false">
                        查看数据
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li>
                            <a class="dropdown-item" href="/StuEXD">学生答题情况</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="/StuCdt">学生上课情况</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="/all_timu">已发布的题目</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-bs-toggle="dropdown"
                       aria-expanded="false">
                        账号管理
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item disabled">用户名：admin</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <a class="dropdown-item" href="account_management">账户设置</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="systemlogout">登出</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>


<div>
    <div class="card">
        <div class="card-header">
            设置上课时间功能
        </div>
        <div class="card-body">
            <div class="container">

                <div class="row">

                    <div class="col-auto">
                        <div class="input-group">
                            <div class="input-group-text">请设置上课时间（min）</div>
                            <label for="classtime"></label><input type="text" class="form-control" id="classtime"
                                                                  value="40">
                        </div>
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary" onclick="class_begin()"
                                id="begin">确定且开始上课
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-header">
            发布题目
        </div>
        <div class=" container">
            <div class="row">
                <div class="col-6">
                    <div class="card-body" id="timu">
                        <div class="container">
                            <!-- <h5 align="center">发布题目</h5> -->
                            <div class=" input-group">

                                <div class="input-group-text">发布题目</div>
                                <label for="exer"></label><input type="text" class="form-control" id="exer"
                                                                 placeholder="题目">

                            </div>

                        </div>
                    </div>
                    <div class="container">
                        <div class="card ">
                            <div class="card-header">
                                请设置题目和正确选项
                            </div>

                            <div class="card-body">
                                <!-- A -->
                                <div class="input-group">
                                    <div class="input-group-text">
                                        <label for="inlineRadio1"></label><input class="form-check-input" type="radio"
                                                                                 name="inlineRadioOptions"
                                                                                 id="inlineRadio1" value="A" checked>
                                        <label class="form-check-label">A</label>
                                    </div>
                                    <label for="Aex"></label><input type="text" class="form-control" id="Aex"
                                                                    placeholder="题目">
                                </div>
                                <!-- A -->
                                <!-- B -->
                                <div class="input-group">
                                    <div class="input-group-text">
                                        <label for="inlineRadio2"></label><input class="form-check-input" type="radio"
                                                                                 name="inlineRadioOptions"
                                                                                 id="inlineRadio2" value="B">
                                        <label class="form-check-label">B</label>
                                    </div>
                                    <label for="Bex"></label><input type="text" class="form-control" id="Bex"
                                                                    placeholder="题目">
                                </div>
                                <!-- B -->
                                <!-- C -->
                                <div class="input-group">
                                    <div class="input-group-text">
                                        <label for="inlineRadio3"></label><input class="form-check-input" type="radio"
                                                                                 name="inlineRadioOptions"
                                                                                 id="inlineRadio3" value="C">
                                        <label class="form-check-label">C</label>
                                    </div>
                                    <label for="Cex"></label><input type="text" class="form-control" id="Cex"
                                                                    placeholder="题目">
                                </div>
                                <!-- C -->
                                <!-- D -->
                                <div class="input-group">
                                    <div class="input-group-text">
                                        <label for="inlineRadio4"></label><input class="form-check-input" type="radio"
                                                                                 name="inlineRadioOptions"
                                                                                 id="inlineRadio4" value="D">
                                        <label class="form-check-label">D</label>
                                    </div>
                                    <label for="Dex"></label><input type="text" class="form-control" id="Dex"
                                                                    placeholder="题目">
                                </div>
                                <!-- D -->
                            </div>
                        </div>
                        <div align="center"><br>
                            <button class="btn btn-danger" onclick="pub_ex()">立即发布</button>
                            &nbsp; &nbsp;
                            <button class="btn btn-success" onclick="clear1()">清空题目</button>
                        </div>
                        <br>
                    </div>
                </div>

                <div class="col-6">
                    <br>
                    <div class=" card">
                        <div class=" card-header">
                            学生答题情况
                        </div>
                        <div class="card-body">
                            <table class="table table-striped align-self-center  overflow-x-auto">
                                <thead>
                                <tr>
                                    <th scope="col">学生</th>
                                    <th scope="col">作答时间</th>
                                    <th scope="col">作答选项</th>
                                    <th scope="col">答案判定</th>
                                </tr>
                                </thead>
                                <tbody>
                                <div id="tdata111">

                                </div>
                                </tbody>

                            </table>
                            <button class="btn btn-secondary" onclick="get_data()">刷新数据</button>
                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
</body>


<script>
    let current_id = 0;

    function class_begin() {
        const xhr = new XMLHttpRequest();
        const Class_time = document.getElementById('classtime').value;
        //alert(Class_time);

        xhr.open("POST", "/cbegin", true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        const requestbody = {
            'time': Class_time,
            'status': 'on'
        };
        xhr.send(JSON.stringify(requestbody));

        //接受
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    Swal.fire('上课请求成功！', '', 'success')
                    document.getElementById('begin').setAttribute('disabled', 'disabled');
                }
            }
        }
    }

    function pub_ex() {
        {#const datahtml = document.querySelector("tbody");//解析数据#}
        {#datahtml.innerHTML = '';#}
        let correct = '';
        const correctA = document.getElementById('inlineRadio1').checked;
        const correctB = document.getElementById('inlineRadio2').checked;
        const correctC = document.getElementById('inlineRadio3').checked;
        const correctD = document.getElementById('inlineRadio4').checked;
        if (correctA) {
            correct = 'A';
        } else if (correctB) {
            correct = 'B';
        } else if (correctC) {
            correct = 'C';
        } else if (correctD) {
            correct = 'D';
        }
        const exer = document.getElementById('exer').value;
        const ex_A = document.getElementById('Aex').value;
        const ex_B = document.getElementById('Bex').value;
        const ex_C = document.getElementById('Cex').value;
        const ex_D = document.getElementById('Dex').value;

        const requestbody = {
            'exer': exer,
            'ex_A': ex_A,
            'ex_B': ex_B,
            'ex_C': ex_C,
            'ex_D': ex_D,
            'correct': correct
        };
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "/get_ex", true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify(requestbody))
        //接受
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    current_id = response['id'];
                    Swal.fire('请求成功！', '题目编号是：' + response['id'], 'success');
                }
            }
        }
    }

    function get_data() {
        const datahtml = document.querySelector("tbody");//解析数据
        datahtml.innerHTML = '';
        const id = current_id;
        const xhr = new XMLHttpRequest();
        if (id === 0) {
            Swal.fire("没有获取到题目编号", '', "error");
            return 0;
        }
        const requestbody = {
            'id': id,
        };

        xhr.open("POST", "/getdt", true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify(requestbody))

        //接受
        let innerHTML = "";
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    const dt_data = response['data'];
                    if (dt_data.length === 0) {
                        datahtml.innerHTML = '无数据';
                        return 0;
                    }
                    for (let i = 0; i < dt_data.length; i++) {
                        innerHTML += `<tr>
                            <td>${dt_data[i][0]}</td>
                            <td>${dt_data[i][2]}</td>
                            <td>${dt_data[i][3]}</td>
                            <td>${dt_data[i][4]}</td>
                            </tr>`;
                    }
                    datahtml.innerHTML = innerHTML;
                }
            }
        }
    }

    function clear1() {
        swal({
            title: "警告",
            text: "确定要清空题目内容吗？",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
            .then((willDelete) => {
                if (willDelete) {
                    document.getElementById('exer').value = '';
                    document.getElementById('Aex').value = '';
                    document.getElementById('Bex').value = '';
                    document.getElementById('Cex').value = '';
                    document.getElementById('Dex').value = '';
                    document.getElementById('inlineRadio1').checked = true;
                    current_id = 0;//杀掉
                }
            });
    }
</script>